<link rel="stylesheet" type="text/css"
	href="${CONTEXT_PATH}/static/css/dbbackup/cron.css">
	<link rel="stylesheet" type="text/css"
	href="../../static/js/jquery-easyui-1.3.5/themes/default/easyui.css">
<!-- <script src="${CONTEXT_PATH}/static/js/jquery-1.8.3.js"
	type="text/javascript" charset="utf-8"></script>


<script type="text/javascript"
	src="../../static/js/jquery-easyui-1.3.5/jquery.easyui.min.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="../../static/js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"
	charset="utf-8"></script> -->
	<script src="../../static/app/ctrls/main.js"
	type="text/javascript"></script>
	<script type="text/javascript">

     </script>
<script src="../../static/app/ctrls/dbback-ctrls.js"
	type="text/javascript"></script>
<script src="../../static/app/ctrls/dbbackup/datas.js"
	type="text/javascript"></script>
	<!-- <script src="../../static/js/jquery.cookie.js"
	type="text/javascript"></script>
		<script src="../../static/js/Jquery-json.js"
	type="text/javascript"></script>
			<script src="../../static/js/jqLoading.js"
	type="text/javascript"></script> -->

<div class="easyui-layout" data-options="fit : true,border : false">

	<div data-options="region:'west',collapsible:false" title="功能项"
		style="width: 100px;">
		<div class="easyui-accordion"
			data-options="selected:true,fit:true,border:false">
			<div id="acco_cronSet" title="时间配置项" selected=true
				style="padding: 10px;">
				<ul>
					<li id="s">秒</li>
					<li id="min">分</li>
					<li id="h">时</li>
					<li id="d">日</li>
					<li id="m">月</li>
					<li id="w">周</li>
					<li id="y">年</li>
				</ul>
			</div>

		</div>
	</div>
	<div id="contents" data-options="region:'center'" class="easyui-tabs">
		<div id="tab_main" title="使用说明" style="padding: 10px"
			data-options="border:false">

			<h3 class="l-title">生成Cron表达式</h3>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第一步】：</span> 点击左边菜单栏，选择需要设置的字段项
			</p>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第二步】：</span> 选择字段项进行设置
			</p>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第三步】：</span> 设置完字段项后，点击左上方的“应用”按钮
			</p>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第四步】：</span>
				所有字段项都设置完成后，并且都应用后，点击左上方的“完成设置”按钮，则会在右边的控制台显示生成的Cron表达式
			</p>
			<p class="l-log-content">
				<span class="l-log-content-tag" style="color: red;">【注意】：</span>
				每次设置完一个字段项时，都需要点击下应用，不然对本字段项的设置不会生效。
			</p>
			<!-- <h3 class="l-title">解析Cron表达式到界面</h3>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第一步】：</span>
				在右边控制台的表达式输入框中输入要解析的Cron表达式
			</p>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第二步】：</span> 点击后面的解析按钮，则输入的表达式会被解析
			</p>
			<p class="l-log-content">
				<span class="l-log-content-tag">【第三步】：</span>
				点击左边的菜单栏的字段项，则可以看到解析到界面展示的Cron表达式情况
			</p> -->
		</div>
		<div title="备份时间配置" style="padding: 10px" data-options="fit:true"
			class="easyui-layout">
			<div data-options="region:'center'">
				<div class="note">
					<p>
						注意：设置在日和周时，需要考虑是否冲突。具体如下：<br /> 1、日和周字段不能同时设置为“?”；<br />
						2、当在日字段上设置为“*”，“,”，“-”，“*”，“?”，“/”，“L”，“W”之一时，周字段只能设置为“?”；<br />
						3、当在周字段上设置为“*”，“,”，“-”，“*”，“?”，“/”，“L”，“#”之一时，日字段只能设置为“?”。<br />
						4、年的设置项为可选，当不设置时为“*”。<br /> 5、Cron表达式的详细语法，请参见文章：<a
							href="tips/CronExpConfig.html" target="_blank">Cron表达式语法详解</a>。<br />
				</div>
				<div style="padding: 5px;">
					<a href="javascript:void(0);" id="application"
						class="easyui-linkbutton" data-options="iconCls:'icon-save'">应用</a>
					<a href="javascript:void(0);" id="setOver"
						class="easyui-linkbutton" data-options="iconCls:'icon-save'">完成设置</a>
				</div>
				<div id="contentSetRadio" class="contentRadio"></div>
				<div id="contentSet" class="contentSet"></div>
			</div>
			<div data-options="region:'east',iconCls:'icon-reload'" title="控制台"
				style="width: 300px; padding: 10px;">
				设置值：<br>
				<table border=0>
					<tr align="center">
						<td width="25px">项</td>
						<td width="25px">秒</td>
						<td width="25px">分</td>
						<td width="25px">时</td>
						<td width="25px">日</td>
						<td width="25px">月</td>
						<td width="25px">周</td>
						<td width="25px">年</td>
					</tr>
					<tr align="center">
						<td>值</td>
						<td id="s_td">0</td>
						<td id="min_td">*</td>
						<td id="h_td">*</td>
						<td id="d_td">*</td>
						<td id="m_td">*</td>
						<td id="w_td">?</td>
						<td id="y_td">*</td>
					</tr>
				</table>
				<br>表达式： <input value="" id="expression" style="width: 250px;"
					value="0 * * * * ? *"/> 
					
					<br/><span>示例：</span>
				<div id="examples"  class="examples"></div>
				<div style="color:red;padding-top:15px">
				@if( so.hasPermission("/system/dbbackup/edit")) {
					<a href="javascript:void(0);" id="saveSetting" class="easyui-linkbutton">确认无误后，请点击这里</a>
					@}
				</div>
			</div>
		</div>
	</div>
</div>